<!-- type 1、上报故障  2、售后服务信息 -->

<template>
	<view :class="['page', { iphoneX: isIphoneX }]">
		<template v-if="token && isLogin">
			<!-- 上报故障 -->
			<template v-if="type == 1">
				<view class="body">
					<view class="form-wrap">
						<view class="form-item">
							<view class="label">设备名称</view>
							<view class="form-input">
								<view class="content"><input type="text" class="inp" v-model="devInfo.dev_name" placeholder="设备名称" disabled="" /></view>
							</view>
						</view>
						<view class="form-item">
							<view class="label">设备型号</view>
							<view class="form-input">
								<view class="content"><input type="text" class="inp" v-model="devInfo.dev_num" placeholder="设备型号" disabled="" /></view>
							</view>
						</view>
						<view class="form-item">
							<view class="label a-t">设备地址</view>
							<view class="form-textarea">
								<textarea
									class="inp-textarea"
									:value="devInfo.dev_address"
									:auto-height="true"
									placeholder="设备地址"
									maxlength="-1"
									@input="inputTextarea($event, 3)"
								></textarea>
							</view>
						</view>
						<!-- <view class="form-item">
							<view class="label">设备地址</view>
							<view class="form-input">
								<view class="content">
									<input type="text" class="inp" v-model="devInfo.dev_address" placeholder="设备地址"
										disabled="" />
								</view>
							</view>
						</view> -->
						<view class="form-item">
							<view class="label">联系人</view>
							<view class="form-input">
								<view class="content"><input type="text" class="inp" v-model="report_params.report_name" placeholder="联系人" /></view>
							</view>
						</view>
						<view class="form-item m-b2">
							<view class="label">联系手机</view>
							<view class="form-input">
								<view class="content"><input type="text" class="inp" v-model="report_params.report_phone" placeholder="联系手机" /></view>
							</view>
						</view>
						<view class="form-textarea">
							<textarea
								confirm-type="done"
								class="inp-textarea"
								:value="report_params.dev_state"
								placeholder="简单描述设备问题"
								maxlength="-1"
								@confirm="setDevState"
								@input="inputTextarea($event, 1)"
							></textarea>
						</view>
						<view class="form-wrap upload-pic-wrap">
							<template>
								<view class="form-upload-pic">
									<template>
										<view class="img-item" v-for="(item, index) in pic" :key="index">
											<image src="@/static/images/filter_bg.png" mode="widthFix"><!-- 占位 --></image>
											<view class="img-wrap" @click="previewPic(index)"><image class="img" :src="item" mode="widthFix"></image></view>
											<view class="del-icon" @click="delPic(index)"><view class="iconfont">&#xe65c;</view></view>
										</view>
									</template>
									<view v-if="pic.length < 5" class="img-item add-btn" @click="uploadImage">
										<image src="@/static/images/upload_pic.png" mode="widthFix"></image>
									</view>
								</view>
								<view class="upload-pic-tips">上传设备图片(最多5张)</view>
							</template>
						</view>
					</view>
				</view>
				<view class="footer">
					<view class="fix-wrap bottom"><view class="submit-btn" @click="submitReport">提交故障</view></view>
				</view>
			</template>

			<!-- 售后服务信息 -->
			<template v-if="type == 2">
				<view class="body">
					<view class="form-wrap">
						<view class="form-item">
							<view class="label">工作人员</view>
							<view class="form-input">
								<view class="content"><input type="text" class="inp" v-model="repair_params.worker_name" placeholder="输入工作人员" /></view>
							</view>
						</view>
						<view class="form-item">
							<view class="label">客 户</view>
							<view class="form-input">
								<view class="content"><input type="text" class="inp" v-model="repair_params.cust_name" placeholder="输入客户信息" /></view>
							</view>
						</view>
						<view class="form-item">
							<view class="label">售后类型</view>
							<picker class="form-picker" mode="selector" :range="job_type.data" range-key="name" @change="changeJobType">
								<view class="picker">
									<view :class="['select-data', { 'input-placeholder': !job_type.select }]">{{ job_type.select || '售后类型' }}</view>
									<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
								</view>
							</picker>
						</view>
						<view class="form-item">
							<view class="label">完成情况</view>
							<picker class="form-picker" mode="selector" :range="deal_result.data" @change="changeDealResult">
								<view class="picker">
									<view :class="['select-data', { 'input-placeholder': !deal_result.select_result }]">{{ deal_result.select_result || '售后完成情况' }}</view>
									<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
								</view>
							</picker>
						</view>
					</view>
					<view class="hd-title" style="margin-left: 20rpx;padding-left: 10rpx;">设备问题</view>
					<view class="form-wrap">
						<view class="question-list-area">
							<view class="question-list">
								<view class="item" v-for="(item, index) in tool_question.data" :key="index" @click="selectQuestion(item.id)">
									<text class="name">{{ item.value }}</text>
									<view v-if="item.isCheck" class="f-blue iconfont">&#xe640;</view>
									<view v-else class="iconfont">&#xe656;</view>
								</view>
							</view>
						</view>
						<view class="form-textarea">
							<textarea
								confirm-type="done"
								class="inp-textarea"
								:value="repair_params.work_job"
								@input="inputTextarea($event, 2)"
								placeholder="其他问题描述"
								maxlength="-1"
							></textarea>
						</view>

						<view class="form-wrap upload-pic-wrap">
							<template>
								<view class="form-upload-pic">
									<template>
										<view class="img-item" v-for="(item, index) in pic" :key="index">
											<image src="@/static/images/filter_bg.png" mode="widthFix"><!-- 占位 --></image>
											<view class="img-wrap" @click="previewPic(index)"><image class="img" :src="item" mode="widthFix"></image></view>
											<view class="del-icon" @click="delPic(index)"><view class="iconfont">&#xe65c;</view></view>
										</view>
									</template>
									<view v-if="pic.length < 5" class="img-item add-btn" @click="uploadImage">
										<image src="@/static/images/upload_pic.png" mode="widthFix"></image>
									</view>
								</view>
								<view class="upload-pic-tips">上传设备图片(最多5张)</view>
							</template>
						</view>
					</view>
				</view>
				<view class="footer">
					<view class="fix-wrap bottom"><view class="submit-btn" @click="submitRepair">提交申请</view></view>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
import { uploadImage, previewImage, checkPhone } from '@/common/util.js';
export default {
	name: 'name',
	data() {
		return {
			type: '',
			title: '',
			isStop: true,
			token: uni.getStorageSync('token'),
			appid: getApp().globalData.appid,
			devInfo: {
				dev_name: '',
				dev_num: '',
				dev_address: '',
				number: '',
				dev_type: '',
				owner: ''
			},
			report_params: {
				report_name: '',
				report_phone: '',
				dev_state: ''
			},
			repair_params: {
				dev_name: '',
				worker_id: uni.getStorageSync('userInfo').uid,
				job_type: '',
				worker_name: uni.getStorageSync('userInfo').realname,
				work_job: '',
				cust_name: ''
			},
			deal_result: {
				select_result: '',
				data: ['完成维护，设备正常']
			},
			tool_question: {
				select_question: '',
				data: [],
				isWorkJob: false,
				select_arr: []
			},
			job_type: {
				select: '',
				data: [
					{
						id: 2,
						name: '维护'
					},
					{
						id: 3,
						name: '维修'
					}
				]
			},
			isLogin: false,
			isIphoneX: getApp().globalData.isIphoneX,
			userInfo: uni.getStorageSync('userInfo'),
			loginStateUpdate: false,
			pic: [],
			pageCode: Date.parse(new Date())
		};
	},
	async onLoad(params) {
		console.log(params);
		this.type = params.type;
		this.devInfo.dev_name = params.dev_name;
		this.devInfo.dev_num = params.dev_num;
		this.devInfo.dev_address = params.address;
		this.devInfo.number = params.number;
		this.devInfo.dev_type = params.dev_type;
		this.repair_params.cust_name = params.owner=='null'||!params.owner?'':params.owner;

		if (this.token) {
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				if (this.type == 2) {
					this.tool_question.data = await this.getQuestionList();
				}
			} else {
				this.isLogin = await this.$loginState('reset');
			}
		}
	},
	async onShow() {
		// 重新登录后执行
		if (this.loginStateUpdate) {
			this.token = uni.getStorageSync('token');
			this.userInfo = uni.getStorageSync('userInfo');
			this.isLogin = true;
			this.loginStateUpdate = false;
		}
		if (!this.token && !this.isLogin) {
			this.isLogin = await this.$loginState('reset');
		}
	},

	onReady() {
		setTimeout(() => {
			if (this.type == 1) {
				this.title = '上报故障';
			} else if (this.type == 2) {
				this.title = '售后维修';
			}
			uni.setNavigationBarTitle({
				title: this.title
			});
		}, 100);
	},

	methods: {
		/***********上报维修*************/

		// 输入猫叔设备问题
		inputTextarea(e, type) {
			let v = e.detail.value;
			if (type == 1) {
				this.report_params.dev_state = v;
			} else if (type == 2) {
				this.repair_params.work_job = v;
			} else if (type == 3) {
				this.devInfo.dev_address = v;
			}
		},

		// 体检维修信息
		submitReport: function() {
			if (this.report_params.report_name == '') {
				this.$showToast({
					title: '请输入联系人'
				});
			} else if (this.report_params.report_phone == '') {
				this.$showToast({
					title: '请输入联系人手机'
				});
			} else if (!checkPhone(this.report_params.report_phone)) {
				this.$showToast({
					icon: 'none',
					title: '请输入正确的手机号码'
				});
			} else if (this.report_params.dev_state == '') {
				this.$showToast({
					title: '请简单描述设备问题'
				});
			} else if (this.pic.length == 0) {
				this.$showToast({
					title: '请上传问题设备图片'
				});
			} else {
				let token = uni.getStorageSync('token');
				if (token) {
					if (this.isStop) {
						this.isStop = false;
						uni.showLoading({
							title: '信息提交中...'
						});
						this.uploadData(0);
					}
				} else {
					uni.showLoading({
						title: '登录超时...',
						success() {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/login/login?backType=prev',
									success() {
										uni.hideLoading();
									}
								});
							}, 1000);
						}
					});
				}
			}
		},

		setDevState: function(e) {
			console.log(e.detail.value);
			this.report_params.dev_state = e.detail.value;
		},

		// 上传故障
		uploadData: async function(index) {
			let length = this.pic.length;
			let end = '';
			let _this = this;
			if (index == length - 1) {
				end = 0;
			} else {
				end = -1;
			}
			let res = await this.$api.tool_api.upReportInfo({
				filePath: this.pic[index],
				name: 'photo',
				formData: {
					number: this.devInfo.number,
					dev_type: this.devInfo.dev_type,
					dev_name: this.devInfo.dev_name,
					dev_state: this.report_params.dev_state,
					dev_address: this.devInfo.dev_address,
					report_name: this.report_params.report_name,
					report_phone: this.report_params.report_phone,
					pageCode: this.pageCode,
					end: end,
					appid: this.appid,
					token: this.token
				}
			});
			uni.showLoading({
				title: '信息提交中...'
			});
			console.log(res);
			if (res.data) {
				res.data = JSON.parse(res.data); // uploadFile 返回data为string，转换成json
			}
			if (res.data.ret == 1000) {
				if (index < length - 1) {
					setTimeout(() => {
						index++;
						_this.uploadData(index);
					}, 300);
				} else if (index == length - 1) {
					uni.hideLoading();
					this.$showToast({
						icon: 'success',
						title: '信息提交成功..'
					}).then(() => {
						setTimeout(() => {
							this.isStop = true;
							uni.redirectTo({
								url: `/package_common/dev_mend/dev_mend?type=1&number=${this.devInfo.number}`,
								success() {
									uni.hideLoading();
								}
							});
						}, 1000);
					});
				}
			} else {
				this.isStop = true; // 请求失败重新激活提交按钮
			}
		},

		// 添加售后维修信息
		submitRepair: function() {
			// console.log("提交售后信息",this.job_type.select );
			if (this.repair_params.worker_name == '') {
				this.$showToast({
					title: '请输入工作人员姓名'
				});
			} else if (this.repair_params.cust_name == '') {
				this.$showToast({
					title: '请输入客户信息'
				});
			} else if (!this.job_type.select) {
				this.$showToast({
					title: '请选择设备售后类型'
				});
			} else if (this.deal_result.select_result == '') {
				this.$showToast({
					title: '请选择设备售后状况'
				});
			} else if (this.repair_params.work_job == '') {
				this.$showToast({
					title: '请输入售后工作描述'
				});
			}
			//  else if (this.tool_question.isWorkJob) {
			// 	if (this.repair_params.work_job == '') {
			// 		this.$showToast({
			// 			title: '请输入售后工作描述'
			// 		});
			// 	}
			// }
			else if (this.pic.length == 0) {
				this.$showToast({
					title: '请上传设备图片'
				});
			} else {
				let token = uni.getStorageSync('token');
				if (token) {
					if (this.isStop) {
						this.isStop = false;
						uni.showLoading({
							title: '信息提交中...'
						});
						this.uploadRepair(0);
					}
				} else {
					uni.showLoading({
						title: '登录超时...',
						success() {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/login/login?backType=prev',
									success() {
										uni.hideLoading();
									}
								});
							}, 1000);
						}
					});
				}
			}
		},

		// 上传维修信息
		uploadRepair: async function(index) {
			let length = this.pic.length;
			let end = '';
			let _this = this;
			if (index == length - 1) {
				end = 0;
			} else {
				end = -1;
			}
			let res = await this.$api.tool_api.upRepairsInfo({
				filePath: this.pic[index],
				name: 'photo',
				formData: {
					number: this.devInfo.number,
					dev_name: this.devInfo.dev_name,
					worker_id: this.userInfo.uid,
					job_type: this.repair_params.job_type,
					worker_name: this.userInfo.realname,
					work_job: this.repair_params.work_job,
					cust_name: this.repair_params.cust_name,
					deal_result: this.deal_result.select_result,
					pageCode: this.pageCode,
					end: end,
					appid: this.appid,
					token: this.token
				}
			});
			uni.showLoading({
				title: '信息提交中...'
			});
			if (res.data) {
				res.data = JSON.parse(res.data); // uploadFile 返回data为string，转换成json
			}
			if (res.data.ret == 1000) {
				if (index < length - 1) {
					setTimeout(() => {
						index++;
						_this.uploadRepair(index);
					}, 300);
				} else if (index == length - 1) {
					uni.hideLoading();
					this.$showToast({
						icon: 'success',
						title: '信息提交成功..'
					}).then(() => {
						setTimeout(() => {
							this.isStop = true;
							uni.redirectTo({
								url: `/package_common/dev_mend/dev_mend?type=2&number=${this.devInfo.number}`,
								success() {
									uni.hideLoading();
								}
							});
						}, 1000);
					});
				}
			} else {
				this.isStop = true; // 请求失败重新激活提交按钮
				uni.hideLoading();
				this.$showToast({
					icon: 'none',
					title: '信息提交失败..'
				});
			}
		},

		// 售后工作内容
		setWorkJob: function(e) {
			console.log(e.detail.value);
			this.repair_params.work_job = e.detail.value;
		},

		// 切换维修结果
		changeDealResult: function(e) {
			let index = e.detail.value;
			this.deal_result.select_result = this.deal_result.data[index];
		},

		// 常见问题列表
		getQuestionList: async function() {
			let res = await this.$api.tool_api.reportWhylist({
				appid: this.appid,
				token: this.token
			});
			if (res.data.ret == 1000) {
				let list = [];
				res.data.data.forEach((item, index) => {
					let data = {
						id: '',
						value: '',
						isCheck: false
					};
					data.id = index;
					data.value = item;
					list.push(data);
				});
				return list;
			}
		},

		selectQuestion: function(id) {
			this.tool_question.data.forEach(item => {
				if (item.id == id) {
					item.isCheck = !item.isCheck;
					if (this.tool_question.select_arr.indexOf(item.value) == -1) {
						this.tool_question.select_arr.push(item.value);
					} else {
						let index = this.tool_question.select_arr.indexOf(item.value);
						this.tool_question.select_arr.splice(index, 1);
					}
				}
			});
			this.repair_params.work_job = this.tool_question.select_arr.join('，');
		},

		// 切换工作类型
		changeJobType: function(e) {
			let index = e.detail.value;
			this.job_type.select = this.job_type.data[index].name;
			this.repair_params.job_type = this.job_type.data[index].id;
			console.log(this.job_type.data, this.repair_params.job_type);
		},

		// 上传图片
		uploadImage: function() {
			let _this = this;
			uploadImage({
				length: this.pic.length,
				maxSize: 5,
				success(res) {
					_this.pic = _this.pic.concat(res);
				}
			});
		},

		// 预览图片
		previewPic: function(index) {
			previewImage({
				data: this.pic,
				index: index
			});
		},

		// 删除图片
		delPic: function(index) {
			this.pic.splice(index, 1);
		}
	},
	components: {},
	computed: {},
	watch: {}
};
</script>

<style lang="less">
.form-wrap {
	margin-top: 20rpx;
}

.submit-btn {
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	background: #0085ff;
	color: #fff;
	font-size: 30rpx;
}

.form-upload-pic {
	margin: 20rpx 0 0 20rpx;
}

.upload-pic-tips {
	margin-bottom: 20rpx;
	padding-left: 20rpx;
	font-size: 24rpx;
	color: #999;
}
.hd-title {
	border-left: 6rpx solid #09f;
	padding-left: 20rpx;
	margin: 20rpx 0;
	font-weight: bold;
	font-size: 30rpx;
	color: #000;
}
.question-list-area {
	padding: 20rpx;
}
.question-list {
	display: flex;
	flex-wrap: wrap;
	.item {
		flex-shrink: 0;
		width: 50%;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		.name {
			font-size: 28rpx;
		}
		.iconfont {
			margin-right: 20rpx;
			font-size: 36rpx;
			color: #999;
		}
	}
}
</style>
